<template>
  <div v-loading="loading" element-loading-text="加载中">
    <el-form ref="folderForm" :model="folderForm" :rules="folderRules" label-width="120px" label-suffix="：">
      <el-form-item label="上级文件夹" prop="parentFolderId">
        <el-cascader v-model="folderForm.parentFolderId"
          :props="{ checkStrictly: true, value: 'folderId', label: 'folderName', children: 'children', emitPath: false }"
          :options="selectFolderList"
          filterable
          clearable
          class="width-300"
        >
        </el-cascader>
      </el-form-item>

      <el-form-item label="文件夹名称" prop="folderName">
        <el-input v-model="folderForm.folderName" 
          maxlength="20" 
          class="width-300" 
          show-word-limit>
        </el-input>
      </el-form-item>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="doConfirm">确定</el-button>
      <el-button @click="doCancel">取消</el-button>
    </div>
  </div>
</template>

<script>
  import { createFolder } from '@/api/third/thirdMaterialFolder'

  export default {
    props: {
      showFlag: {
        type: Boolean,
        default() {
          return false
        }
      },
      // 文件夹对象
      folderObj: {
        type: Object,
        required: true
      },
      // 文件夹列表
      folderList: {
        type: Array,
        required: true
      }
    },
    watch: {
      showFlag(val) {
        if (val) {
          this.init()
        }
      }
    },
    data() {
      return {
        // 文件夹表单
        folderForm: {
          thirdMaterialFolderId: '',
          shopId: '',
          platformType: '',
          folderName: '',
          parentFolderId: ''
        },
        // 文件夹表单规则
        folderRules: {
          parentFolderId: [
            { required: true, trigger: 'blur', message: '请选择上级文件夹' }
          ],
          folderName: [
            { required: true, trigger: 'blur', message: '文件夹名称不能为空' }
          ]
        },
        // 文件夹下拉列表
        selectFolderList: [],
        loading: false,
        fileLoading: false
      }
    },
    created() {
      this.init()
    },
    methods: {
      init() {
        const originData = this.$options.data()
        this.folderForm = originData.folderForm
        this.selectFolderList = originData.selectFolderList
        if (this.$refs['folderForm']) {
          this.$refs['folderForm'].clearValidate()
        }
        Object.assign(this.folderForm, this.folderObj)
        Object.assign(this.selectFolderList, this.folderList)
        this.selectFolderList.unshift({ folderId: '0', folderName: '无' })
      },
      // 确定事件
      doConfirm() {
        this.$refs['folderForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            createFolder(this.folderForm).then((response) => {
              this.loading = false
              if (response.isError) return
              this.$message({ type: 'success', message: '保存成功' })
              this.$emit('callback', true)
            })
          }
        })
      },
      // 取消事件
      doCancel() {
        this.$emit('callback', false)
      }
    }
  }
</script>

<style lang="less" scoped>

</style>